<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>10.18</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .box {
      width: 400px;
      height: 120px;
      margin: 0 auto;
    }
    .img {
      width: 400px;
      height: 100px;
      display: flex;
      justify-content: space-between;
      background-image: url('./04.jpeg');
      background-image: url('./03.jpeg');
      background-image: url('./02.jpeg');
      background-image: url('./01.jpeg');
      background-size: 400px 100px;
    }
    .img1 {
      width: 30px;
      height: 30px;
      margin: auto 0;
    }
    .prev {
      width: 30px;
      height: 30px;
      margin: auto 0;
      background-size: 30px 30px;
    }
    .next {
      width: 30px;
      height: 30px;
      margin: auto 0;
      background-size: 30px 30px;
    }
    .btn {
      width: 200px;
      height: 20px;
      display: flex;
      justify-content: space-around;
      margin-left: 100px;
    }
    .btn1 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: auto 0;
      border: 1px solid black;
    }
    .btn2 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: auto 0;
      border: 1px solid black;
    }
    .btn3 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: auto 0;
      border: 1px solid black;
    }
    .btn4 {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      margin: auto 0;
      border: 1px solid black;
    }
    .background {
      background-color: black;
    }
  </style>
  <body>
    <div class="box">
      <div class="img">
        <a href="" class="prev">&lt;</a>
        <a href="" class="next">&gt;</a>
      </div>
      <div class="btn">
        <div class="btn1"></div>
        <div class="btn2"></div>
        <div class="btn3"></div>
        <div class="btn4"></div>
      </div>
    </div>

    <script>
      let img = document.querySelector('.img');
      let prev = document.querySelector('.prev');
      let next = document.querySelector('.next');
      let btn = document.querySelector('.btn');
      let btn1 = document.querySelector('.btn1');
      let btn2 = document.querySelector('.btn2');
      let btn3 = document.querySelector('.btn3');
      let btn4 = document.querySelector('.btn4');
      // prev =addEventListener('click',() =>{
      //     img.style.backgroundImage = 'url("./01.jpeg")'
      // })
      //点击点
      btn1.addEventListener('click', () => {
        img.style.backgroundImage = 'url("./01.jpeg")';
        btn1.classList.add('background');
        btn2.classList.remove('background');
        btn3.classList.remove('background');
        btn4.classList.remove('background');
      });
      btn2.addEventListener('click', () => {
        img.style.backgroundImage = 'url("./02.jpeg")';
        btn1.classList.remove('background');
        btn2.classList.add('background');
        btn3.classList.remove('background');
        btn4.classList.remove('background');
      });
      btn3.addEventListener('click', () => {
        img.style.backgroundImage = 'url("./03.jpeg")';
        btn3.classList.add('background');
        btn1.classList.remove('background');
        btn2.classList.remove('background');
        btn4.classList.remove('background');
      });
      btn4.addEventListener('click', () => {
        img.style.backgroundImage = 'url("./04.jpeg")';
        btn4.classList.add('background');
        btn1.classList.remove('background');
        btn2.classList.remove('background');
        btn3.classList.remove('background');
      });
    </script>
  </body>
</html>
